<%--
  Created by IntelliJ IDEA.
  cart: 唐东
  Date: 2021/1/19
  Time: 23:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>我的购物车</title>
    <script type="text/javascript" >
        function getTotalPrice(cartId,buyNum){
            var price = document.getElementById("price").value;
            var num = document.getElementById("num").value;
            if(price !='' && num != ''){
                document.getElementById("totalPrice").innerHTML = (price*num).toFixed(2);
                window.location.href="http://localhost:8080/updateCartServlet?id=" + cartId + "&num=" + buyNum.value;
            }
        }
    </script>
</head>
<body bgcolor="pink">
    <h2 align="center">我的购物车</h2>
    <hr>
    <table  width="650" align="center" class="border_distance" bgcolor="white">
        <thead>
            <tr bgcolor="#DB7093">
                <td align="center" width="80">商品名称</td>
                <td align="center">商品单价</td>
                <td align="center" width="100">购买数量</td>
                <td align="center" width="100">金额</td>
                <td align="center" width="100">编辑</td>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${requestScope.carts}" var="cart">
                <tr>
                    <td style="width: 30px">${cart.bookName}</td>
                    <td style="width: 60px">
                        <input type="text" id="price" onblur="getTotalPrice()" value="${cart.price}" readonly/>
                    </td>
                    <td style="width: 80px">
                        <input type="text" id="num" onblur="getTotalPrice(${cart.id},this)" value="${cart.num}"/>
                    </td>
                    <td style="width: 80px" id="totalPrice">${cart.totalPrice}</td>
                    <td style="width: 80px">
                        <a href="/deleteCartBookServlet?cartId=${cart.id}">退回商品架</a>
                    </td>
                </tr>
            </c:forEach>
            <tr align="center">
                <td colspan="5">
                    <a href="/listUserHomeServlet">继续购物</a>
                    <a href="/emptyCartServlet">清空购物车</a>
                    <a href="/confirmOrderServlet">提交订单</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
